/**
 * 样衣初选收货详情
 */
import * as React from 'react'
import { Card, Form, Button, message, Table, InputNumber } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, Zmage } from '../../components'
import { post, TAKE_ONE_SAMPLE } from '../../service/api'
import '../../assets/style/detail.less'
export interface Props{
  sample: any
  sampleImgs: any
  record: any
  history: any
}

@Authentication
class TakeGoodsDetail extends React.Component<Props & FormComponentProps, any> {

  state = {
    list: []
  }

  componentWillReceiveProps (nextProps: Props & FormComponentProps) {
    const {record: { Detial }} = nextProps
    const { list } = this.state
    if(JSON.stringify(list) !== JSON.stringify(Detial)){
      this.setState({
        ...this.state,
        list: Detial
      })
    }
  }

  handleOp = () => {
    const { sample: { id }, history } = this.props
    const { list } = this.state
    post(TAKE_ONE_SAMPLE, { sampleId: id, ids: list }).then((res: any) => {
      if (res.code == '1') {
        message.success('操作成功！')
        history.goBack()
      }else {
        message.error(res.errMsg)
      }
    })
  }
  handleChange = (id: string, e: any) => {
    const { list } = this.state
    const newList = list;
    newList.map((row: any) => {
      if(row.id == id) {
        row.recqty = e
        return
      }
    })
  }
  render () {
    const { sampleImgs, sample, history, record } = this.props
    const { list } = this.state
    let colors: any [] = [], mainColor: string = ""
    if (record.Color != null) {
      record.Color.forEach((item: any, index: number) => {
        colors.push(<span key={"ys" + index.toString()}>{item.colourname}&nbsp;&nbsp;</span>)
        if (item.isrecom) mainColor = item.colourname
      })
    }
    let sizes: any [] = []
    if (record.Size != null) {
      record.Size.forEach((item: any, index: number) => {
        sizes.push(<span key={"ys" + index.toString()}>{item.sizename}&nbsp;&nbsp;</span>)
      })
    }
    let goods = {
      isMain:  sample.ismain=="0"?'否': '是',
      colors,
      mainColor,
      sizes,
      cost: record.cost
    }
    const getImgs = () => {
      let imgs = []
      if(sampleImgs) {
        if(sampleImgs.limg1) imgs.push(sampleImgs.limg1)
        if(sampleImgs.limg2) imgs.push(sampleImgs.limg2)
        if(sampleImgs.limg3) imgs.push(sampleImgs.limg3)
        if(sampleImgs.limg4) imgs.push(sampleImgs.limg4)
        if(sampleImgs.limg5) imgs.push(sampleImgs.limg5)
      }
      return imgs
    }
    const columns: any [] = [
      {
        title: '颜色',
        dataIndex: 'Color',
        key: 'Color',
      },{
        title: '尺码',
        dataIndex: 'Size',
        key: 'Size',
      },{
        title: '发货数量',
        dataIndex: 'sendqty',
        key: 'sendqty',
      },{
        title: '确认数量',
        dataIndex: 'recqty',
        width: '150px',
        key: 'recqty',
        render: (text: any, record: any) => {
          return <InputNumber defaultValue={record.sendqty} onChange={(e: any) => this.handleChange(record.id, e)}/>
        }
      }
    ]
    return (
      <PageHeaderLayout 
        title = "">
        <Card bordered  title="基本资料">
          <DescriptionList size="large" title="样衣图片" style={{ marginBottom: 32 }}>
            <Description term="" style={{width: "100%"}}>
              {getImgs().map((img: string, index: number) => (
                <Zmage key={index} className="yy-img" src={img} />
              ))}
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="样衣信息" style={{ marginBottom: 32 }}>
            <Description term="样衣编码">{sample.sampleId}</Description>
            <Description term="波段号">{sample.bandname}</Description>
            <Description term="大类">{sample.dlText}</Description>
            <Description term="小小类">{sample.xlText}</Description>
            <Description term="供应商货号">{sample.pcode}</Description>
            <Description term="合作方式">{sample.jyfs}</Description>
            <Description term="供应商编码">{sample.supplierid}</Description>
            <Description term="主荐款">{goods.isMain}</Description>
            <Description term="颜色">{goods.colors}</Description>
            <Description term="主荐颜色">{goods.mainColor}</Description>
            <Description term="尺码">{goods.sizes}</Description>
            <Description term="报价">{goods.cost}</Description>
          </DescriptionList>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="发货信息">
          <Table 
            rowKey="Id"
            columns = {columns}
            dataSource = {list || []}
            pagination = {false}
          />
          <div style={{textAlign: 'center',marginTop:"20px"}}>
            <Button type="primary" onClick={this.handleOp}>提交</Button>&nbsp;
            <Button onClick={() => {history.goBack()}}>返回</Button>
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(TakeGoodsDetail)
